/**
 * Created by zhaoxk on 2017/2/24.
 */
import React from 'react';
import _ from 'lodash';
import { Accordion, Tabs } from 'antd-mobile';
import styles from './index.less';

const Panel = Accordion.Panel;
const TabPane = Tabs.TabPane;

function Item({ data }) {
    const result = _.map(data, (d, i) => (
        <div
            className={styles.suggest}
            key={`suggestItem${i}`}
        >
            <ul>
                <li className={styles.suggest1}>{d.name}</li>
                <li className={styles.suggest2}>{d.times}</li>
                <li className={styles.suggest3}>{d.date}</li>
            </ul>
            <em className={styles[`status${d.status}`]}>{d.statusName}</em>
        </div>
    ));
    if (result.length > 0) {
        return <div>{result}</div>;
    }
    return (
        <div
            style={{
                padding: '.5rem 0',
                textAlign: 'center',
                color: '#999'
            }}
        >
            暂无数据
        </div>
    );
}

function Suggest({ data }) {
    return (
        <Tabs
            defaultActiveKey="1"
        >
            <TabPane tab="全部" key="1">
                <div>
                    <Accordion
                        accordion
                        defaultActiveKey="suggest0"
                    >
                        {_.map(data, (d, i) => (
                            <Panel
                                header={<div style={{color: '#aaa'}}>{d.date}</div>}
                                key={`suggest${i}`}
                            >
                                <Item
                                    data={d.detail}
                                />
                            </Panel>
                        ))}
                    </Accordion>
                </div>
            </TabPane>
            <TabPane tab="临嘱" key="2">
                <div
                    style={{
                        padding: '.5rem 0',
                        textAlign: 'center',
                        color: '#999'
                    }}
                >
                    暂无数据
                </div>
            </TabPane>
            <TabPane tab="长嘱" key="3">
                <div
                    style={{
                        padding: '.5rem 0',
                        textAlign: 'center',
                        color: '#999'
                    }}
                >
                    暂无数据
                </div>
            </TabPane>
        </Tabs>
    );
}

export default Suggest;
